<template>
    <div class="head" :style="{background:$store.state.bg}">
        <h1>学习笔记本</h1>
        <el-button type="primary" v-on:click="show" :style="{background:$store.state.bg,'border-color':$store.state.bg}">编辑</el-button>
    </div>
</template>

<script>
export default {
    methods: {
        show(){
            this.$store.commit('show');
        }
    },
}
</script>

<style lang="scss" scoped>
.head {
    height: 100px;
    text-align: center;
    position: relative;
    h1 {
        color: #fff;
        height: 100px;
        line-height: 100px;
    }
    button {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
}
</style>